<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="full-screen" content="yes">
    <meta content="default" name="apple-mobile-web-app-status-bar-style">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <base target="_blank">
    <title>chat</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/chat.css}">
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/utils.js}"></script>
    <script th:src="@{/js/checklogin.js}"></script>
    <script th:inline="javascript" type="text/javascript">
        var toId;
        function showChat(alluserid,allusername) {
            toId= alluserid;

            //现在聊天对话框
            $("#chatArea").css("display", "inline");
            //请空聊天区
            $("#msgs").html("");
            //聊天记录
            record(user.id,toId)
            //显示“正在和谁聊天”
            $("#chatMes").html("正在和 <font face=\"楷体\">" + allusername + "</font> 聊天");
            //sessionStorage
            var chatData = sessionStorage.getItem(alluserid);
            if(chatData != null) {
                //将聊天记录渲染到聊天区
                $("#msgs").html(chatData);
            }
        }
        function record(uid,tid){
            $.ajax({
                url: "record",
                type: 'GET',
                dataType: 'json',
                data:{"fromId":uid,"toId":tid}
            })
                .done(function(data) {
                    var str =""
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].fromId==user.id) {
                            str = "<div class=\"msg guest\"><div class=\"msg-right\"><div class=\"msg-host headDefault\"><div class=\"msg-host photo\" style=\"  background-image: url(../static/img/avatar/Member003.jpg)\"></div><div class=\"msg-ball\" >" + data[i].message + "</div></div></div>";
                            $("#msgs").append(str);
                        }else {
                            str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"\"><div class=\"msg-host photo\" style=\"  background-image: url(../static/img/avatar/Member002.jpg)\"></div><div class=\"msg-ball\">" + data[i].message + "</div></div></div>";
                             $("#msgs").append(str);
                        }
                    }
                    console.log(str)


                })
        }
        $(function () {
            //显示在线信息
            $("#userName").html(" 用户：" + user.name + "<span style='float: right;color: green'>在线</span>");

        })

        //创建webSocket对象
        var ws = new WebSocket("ws://localhost:8080/userchat");
        // var lockReconnect = false;  //避免ws重复连接
        // var ws = null;          // 判断当前浏览器是否支持WebSocket
        // var wsUrl = "ws://localhost:8080/userchat";

        // createWebSocket(wsUrl);   //连接ws
        //
        // function createWebSocket(url) {
        //     try{
        //         if('WebSocket' in window){
        //             ws = new WebSocket(url);
        //         }
        //         initEventHandle();
        //     }catch(e){
        //         reconnect(url);
        //         console.log(e);
        //     }
        // }
        //给ws绑定事件
            ws.onopen = function () {
                //在建立连接后需要做什么事？
                //显示在线信息
                $("#userName").html(" 用户：" + user.name + "<span style='float: right;color: green'>在线</span>");
            }

            //接收到服务端推送的消息后触发
            ws.onmessage = function (evt) {
                //获取服务端推送过来的消息
                //将dataStr 转换为json对象
                var res = JSON.parse(evt.data);
                //判断是否是系统消息
                if (res.system) {
                    //系统消息
                    var users = res.setUser;
                    //1,好友列表展示
                    //2,系统广播的展示
                    var userlistStr = "";
                    var broadcastListStr = "";

                    for (var otherUser of users) {
                        if (user.name != otherUser.name) {
                            userlistStr += "<li class=\"rel-item\"><a onclick='showChat(\"" + otherUser.id + "\",\"" + otherUser.name + "\")'>" + otherUser.name + "</a></li>";
                            broadcastListStr += "<li class=\"rel-item\" style=\"color: #9d9d9d;font-family: 宋体\">您的好友 " + otherUser.name + " 已上线</li>";
                        }
                    }
                    //渲染好友列表和系统广播
                    $("#userlist").html(userlistStr);
                    $("#broadcastList").html(broadcastListStr);

                } else {
                    //不是系统消息
                    //将服务端推送的消息进行展示
                    var str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"\"><div class=\"msg-host photo\" style=\"  background-image: url(../static/img/avatar/Member001.jpg)\"></div><div class=\"msg-ball\">" + res.message + "</div></div></div>";
                    if ( toId == res.fromId) {
                        $("#msgs").append(str);
                    }
                    var chatData = sessionStorage.getItem(res.fromId);
                    if(chatData != null) {
                        str = chatData + str;
                    }
                    sessionStorage.setItem(res.fromId,str);

                }
            }

            ws.onclose = function () {
                $("#userlist").html(" 用户: "+user.name+" <span style='float :right;color: red'>离线</span>");

            };

        function submit() {
            //获取输入的内容
            var data = $("#context_text").val();
            console.log(data)
            //清除输入区的内容
            $("#context_text").val("");

            var json = {"toId":toId, "fromId": user.id, "isSystem": "false", "message": data};

            //将数据展示在聊天区
            var str = "<div class=\"msg guest\"><div class=\"msg-right\"><div class=\"msg-host headDefault\"></div><div class=\"msg-ball\">" + data + "</div></div></div>";
            $("#msgs").append(str);

            var chatData = sessionStorage.getItem(toId);
            if(chatData != null) {
                str = chatData + str;
            }

            sessionStorage.setItem(toId,str)

            //发送数据给服务端
            ws.send(JSON.stringify(json));
        }

    </script>
</head>

<body>


<div class="abs cover contaniner">
    <div class="abs cover pnl">
        <div class="top pnl-head" style="padding: 20px ; color: white;">
            <div id="userName"></div>
            <div id="chatMes" style="text-align: center;color: #6fbdf3;font-family: 新宋体">
                <!--正在和 <font face="楷体">张三</font> 聊天-->
            </div>
        </div>
        <!--聊天区开始-->
        <div class="abs cover pnl-body" id="pnlBody">
            <div class="abs cover pnl-left" id="initBackground" style="background-color: white; width: 100%">
                <div class="abs cover pnl-left" id="chatArea" style="display: none">
                    <div class="abs cover pnl-msgs scroll" id="show">
                        <div class="pnl-list" id="hists"><!-- 历史消息 --></div>
                        <div class="pnl-list" id="msgs">

                            <!-- 消息这展示区域 -->
                            <!-- <div class="msg guest"><div class="msg-right"><div class="msg-host headDefault"></div><div class="msg-ball">你好</div></div></div>
                             <div class="msg robot"><div class="msg-left" worker=""><div class="msg-host photo" style="background-image: url(img/avatar/Member002.jpg)"></div><div class="msg-ball">你好</div></div></div>-->
                        </div>
                    </div>

                    <div class="abs bottom pnl-text">
                        <div class="abs cover pnl-input">
                            <textarea class="scroll" id="context_text" wrap="hard" placeholder="在此输入文字信息..."></textarea>
                            <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                <ul class="atcom" id="atcom"></ul>
                            </div>
                        </div>

                            <button class="abs br pnl-btn" style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);" id="submit" onclick="submit()" >发送</button>
                    </div>
                </div>

                <!--聊天区 结束-->

                <div class="abs right pnl-right">
                    <div class="slider-container hide"></div>
                    <div class="pnl-right-content">
                        <div class="pnl-tabs">
                            <div class="tab-btn active" id="hot-tab">好友列表</div>
                        </div>
                        <div class="pnl-hot">
                            <ul class="rel-list unselect" id="userlist">
<!--                                &lt;!&ndash;<li class="rel-item"><a onclick='showChat("张三")'>张三</a></li>-->
<!--                                <li class="rel-item"><a onclick ='allChat'>群聊</a></li>-->
                            </ul>
                        </div>
                    </div>

                    <div class="pnl-right-content">
                        <div class="pnl-tabs">
                            <div class="tab-btn active">系统广播</div>
                        </div>
                        <div class="pnl-hot">
                            <ul class="rel-list unselect" id="broadcastList">
                                <!--<li class="rel-item" style="color: #9d9d9d;font-family: 宋体">您的好友 张三 已上线</li>
                                <li class="rel-item" style="color: #9d9d9d;font-family: 宋体">您的好友 李四 已上线</li>-->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>